<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=\, initial-scale=1.0">
    <title>会员</title>
    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4803307_j0ppeqhqw7.css">
    <link rel="stylesheet" href="./css/public.css">
    <link rel="stylesheet" href="./css/member.css">
</head>
<body>
    <header>
        <li class="flex jc-sb bg-base">
            <a href="./my.html">
                <i class="iconfont icon-icon_zuo"></i>
            </a>
            <span>会员服务</span>
            <span></span>
        </li>
    </header>
    <div style="height: 36px;"></div>

    <main>
        <div class="w100p bg-fff">
            <ul class="flex jc-sb list">
                <li class="flex fdc aic">
                    <i class="iconfont icon-huiyuanshoudanmanjian f30"></i>
                    <span>单次</span>
                    <span>¥9.9</span>
                    <span>¥50</span>
                    <span>体验价</span>
                </li>
                <li class="flex fdc aic">
                    <i class="iconfont icon-huiyuanshoudanmanjian f30"></i>
                    <span>6次卡</span>
                    <span>¥240</span>
                    <span>¥300</span>
                    <span>往返包邮</span>
                </li>
                <li class="flex fdc aic">
                    <i class="iconfont icon-huiyuanshoudanmanjian f30"></i>
                    <span>12次卡</span>
                    <span>¥420</span>
                    <span>¥600</span>
                    <span>往返包邮</span>
                </li>
                <li class="flex fdc aic">
                    <i class="iconfont icon-huiyuanshoudanmanjian f30"></i>
                    <span>年卡</span>
                    <span>¥799</span>
                    <span>¥1200</span>
                    <span>不限次数</span>
                </li>
            </ul>
        </div>

        <section class="member-benefits w100p bg-fff">
            <h2>会员权益</h2>
            <ol>
                <li>1.可借1个书袋，共10本</li>
                <li>2.每个书袋归还期限最长1个月</li>
                <li>3.同时能借一个书袋，归还后借另一个</li>
                <li>4.购买后效期1个月，超过有效期将无法使用</li>
                <li>5.借还双向包邮，免配送费</li>
                <li>6.购买后将获得支付金额相同麦粒积分，可在平台内抵扣现金或商城兑换礼品</li>
            </ol>
        </section>

        <div class="coupon flex jc-sb aic w100p bg-fff mt-10">
            <p>优惠券</p>
            <span>无可用</span>
        </div>
        
        <div class="points flex jc-sb aic w100p bg-fff mt-10">
            <p>麦粒(共0个)</p>
            <span>不可抵扣</span>
        </div>
        
        <div class="validity flex jc-sb aic w100p bg-fff mt-10">
            <p>会员有效期</p>
            <span>3个月</span>
        </div>
        
        <div class="tips flex jc-sb aic w100p  mt-10">
            <p>暂不支持 新疆、内蒙古、西藏、海南、甘肃、宁夏、青海、港澳台地区及境外的配送包邮服务</p>
        </div>

    </main>

    <div style="height: 50px;"></div>
    <footer>
        <div class="amount flex w100p aic jc-sb bg-fff">
            <p class="base fw-b">金额：<span id="totalAmount">0.0</span>元</p>
            <button class="next-step">下一步</button>
        </div>
    </footer>

    <script src="./js/jquery.js"></script>
    <script>
        $(document).ready(function () {
            var prices = {
                '单次': 9.9,
                '6次卡': 240,
                '12次卡': 420,
                '年卡': 799
            };

            $('.list li').click(function () {
                // 移除所有<i>元素的'ok'类
                $('.list li i').removeClass('ok');
                // 为当前点击的<li>元素内的<i>元素添加'ok'类
                $(this).find('i').addClass('ok');

                // 获取当前点击的会员类型的价格
                var selectedType = $(this).find('span').eq(0).text();
                var price = prices[selectedType];

                // 更新金额显示
                $('#totalAmount').text(price);
            });
        });
    </script>
</body>
</html>